<template>
  <div>
    <div
      class="select-device"
      style="width: 240px; margin-bottom: 10px; display: inherit"
    >
      <select-device
        placeholder="选择设备"
        :dn="selectedDn"
        :pk="selectedPk"
        @handleEmits="hadnleSelectDevice"
        :indexes="0"
      />
    </div>
    <div v-if="selectedDn">
      <el-row
        v-for="(service, index) in servicesRef"
        :key="index"
        style="margin-bottom: 10px"
      >
        <el-col :span="22">
          <el-row class="service-box">
            <el-col :span="8">
              <el-select
                v-model="service.identifier"
                @change="serviceSelected(service)"
                size="small"
                placeholder="服务下发"
              >
                <!-- <el-option label="服务下发" value="set" /> -->
                <el-option
                  v-for="s in servicesList || []"
                  :label="s.name"
                  :value="s.identifier"
                  :key="s.identifier"
                />
              </el-select>
            </el-col>
            <el-col :span="16" style="padding-left: 5px">
              <!-- <el-row v-if="service.identifier == 'set'">
                <el-col :span="20">
                  <el-row v-for="param in service.inputData" :key="param.identifier" style="margin-bottom: 10px;">
                    <el-col :span="10">
                      <el-select v-model="param.identifier" size="small" @change="onservices">
                        <el-option v-for="prop in propertiesList" :label="prop.name" :value="prop.identifier"
                          :key="prop.identifier" />
                      </el-select>
                    </el-col>
                    <el-col :span="2"> 值: </el-col>
                    <el-col :span="7">
                      <el-input v-model="param.value" size="small" @input="onservices"/>
                    </el-col>
                    <el-col :span="2">
                      <el-button @click="delParam(service.inputData, param)" size="small">-</el-button>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="2">
                  <el-button @click="addParam(service.inputData)" size="small">+</el-button>
                </el-col>
              </el-row> -->
              <!-- v-else -->
              <el-row>
                <el-col :span="20">
                  <el-row
                    v-for="param in findService(service.identifier).inputData"
                    :key="param.identifier"
                    style="margin-bottom: 10px"
                  >
                    <el-col :span="10">
                      {{ param.name }} {{ param.identifier }}
                      {{ param.dataType.specs }}
                    </el-col>
                    <el-col :span="2"> 值: </el-col>
                    <el-col :span="7">
                      <el-input
                        v-model="param.value"
                        size="small"
                        @input="onservices"
                      />
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2" style="padding-left: 3px">
          <el-button @click="delService(service)" size="small">-</el-button>
        </el-col>
      </el-row>
      <el-button @click="addService" size="small">+</el-button>
    </div>
  </div>
</template>

<script>
import SelectDevice from "@/components/rule/select-device.vue";
import { reqThingModelByProductKey } from "@api/model";
import { reqByProductKey } from "@/api/rule";

export default {
  name: "",
  props: {
    services: {
      type: Array,
      default: () => [],
    },
    indexes: {
      type: Number,
      default: "",
    },
    dn: {
      type: String,
      default: "",
    },
  },
  components: {
    SelectDevice,
  },
  data() {
    return {
      selectedPk: "",
      selectedDn: "",
      properties: [],
      servicesRef: [],
      propertiesList: [],
      servicesList: [],
    };
  },
  watch: {
    "servicesRef.length": {
      handler() {
        this.onservices();
      },
    },
  },
  created() {
    this.servicesRef = this.services;
    this.services.map((m, i) => {
      if (m.device && i === 0) {
        const firstObj = m.device ? m.device.split("/") : "";
        if (firstObj) {
          this.selectedPk = firstObj[0] || "";
          this.selectedDn = firstObj[1] === "#" ? "" : firstObj[1];
        }
        this.getProductObjectModel(this.selectedPk);
      }
    });
    this.selectedDn = this.dn;
    console.log(this.selectedDn, "selectedDn", this.selectedPk);
  },
  mounted() {},
  methods: {
    // 选择设备
    hadnleSelectDevice(device) {
      // console.log(device.imei,'124');
      if (!device.imei) return;
      this.selectedDn = device.imei;
      // this.selectedPk = device.productId
      this.onservices();
      this.getProductObjectModel(device); // 获取物模型
      // console.log(this.servicesRef,'servicesRef');
      // 选择设备后清空值
      this.servicesRef.forEach((item) => {
        item.identifier = "";
        item.inputData.forEach((item2) => {
          item2.value = "";
        });
      });
    },
    // 获取物模型
    async getProductObjectModel(device) {
      // let res = await reqThingModelByProductKey({
      //   requestId: device.id,
      //   data: device.productKey,
      // });
      let res = await reqByProductKey(device.deviceType);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      let { data } = res.data;
      // console.log(data, '获取物模型');
      this.initThingModel(data);
    },
    initThingModel(data) {
      this.propertiesList = [];
      this.servicesList = [];
      if (!data) return;
      data.model.properties.forEach((p) => {
        this.propertiesList.push(p);
      });
      data.model.services.forEach((s) => {
        this.servicesList.push(s);
      });
      // this.onservices()
    },
    // 更新数据
    onservices() {
      this.$emit("onservices", this.servicesRef, this.indexes, this.selectedDn);
    },
    addService() {
      // console.log(this.selectedPk + '/' + (this.selectedDn || '#'))
      this.servicesRef.push({
        device: this.selectedPk + "/" + (this.selectedDn || "#"),
        // identifier: 'set',
        identifier: "",
        inputData: [],
      });
    },
    serviceSelected(service) {
      this.servicesList.forEach((s) => {
        if (service.identifier == s.identifier) {
          service.inputData = s.inputData;
        }
      });
      this.onservices();
    },
    delService(service) {
      let idx = this.servicesRef.findIndex(
        (s) => s.identifier == service.identifier
      );
      this.servicesRef.splice(idx, 1);
    },
    findService(identifier) {
      let service = {};
      if (this.servicesList.length === 0) return "";
      this.servicesList.forEach((s) => {
        if (s.identifier == identifier) {
          service = s;
          return service;
        }
      });
      this.servicesRef.forEach((s) => {
        if (s.identifier == identifier) {
          service = s;
          return service;
        }
      });
      return service;
    },
    addParam(inputData) {
      inputData.push({});
      this.onservices();
    },
    delParam(inputData, param) {
      let idx = inputData.findIndex((d) => (d.identifier = param.identifier));
      inputData.splice(idx, 1);
      this.onservices();
    },
  },
};
</script>

<style scoped lang="less">
.service-box {
  border: @ruleBgcolor2;
  border-radius: 3px;
  padding: 5px 5px;
  background-color: @ruleBgcolor;
}
</style>
